<template>
  <div class="emaBox">
    <div class="setting-page">
      <!--<img src="/src/assets/settinyschool/find_head_url.jpg" alt class="find-head-img"/>-->
      <div class="find-navbar">发现页</div>

      <!--左侧预览区域-->
      <!-- <vuedraggable v-model="list" handle=".contentList" class="wrapper" animation="300">
        <transition-group> -->
      <div
        v-for="(item,index) in list"
        :key="index"
        :class="leftIndex === index ? 'border' : ''"
        class="contentList"
        @click="left_click(index)"
      >
        <!--删除按钮-->
        <div hidden v-if="leftIndex === index" class="close" @click.stop @click="close(item.id)">
          <img src="../../../assets/settinyschool/delete.png" alt/>
        </div>
        <!--图片广告左侧预览组件-->
        <imageAd v-if="item.type === 'image_ad'" :list="list" :left-index="index"/>
        <bannerAd v-if="item.type === 'banner_ad'" :list="list" :left-index="index"/>
        <course v-if="item.type === 'course'" :list="list" :left-index="index"/>
        <class v-if="item.type === 'class'" :list="list" :left-index="index"/>
        <navTab v-if="item.type === 'navTab'" :list="list" :left-index="index"/>
        <tabMenu v-if="item.type === 'tabMenu'" :list="list" :left-index="index"/>
      </div>
      <!-- </transition-group>
    </vuedraggable> -->
      <div class="multi-find-section find-section clearfix">
        <div class="section-title">基础组件</div>
        <div class="section-button-group clearfix">
          <el-button style="width:30%" disabled @click="addImageAd()">轮播图</el-button>
          <el-button style="width:30%" disabled @click="addCourse()">热门排行</el-button>
          <el-button style="width:30%" disabled @click="addClass()">推荐课程</el-button>
          <el-button style="width:30%" disabled @click="addBannerAd()">本周精选</el-button>
          <el-button style="width:30%" disabled @click="addMembers()">导航菜单</el-button>
          <!--<el-button style="width:30%" @click="addTabmenu()">tab栏</el-button>-->
        </div>
      </div>
      <!-- 底部tab -->
      <div class="find-footer">
        <div class="find-footer-item active" style="width: 32%;">
          <i class="el-icon-magic-stick find-footer-item__icon"></i>
          <span class="find-footer-item__text">发现</span>
        </div>
        <div class="find-footer-item" style="width: 33%;">
          <i class="el-icon-reading find-footer-item__icon"></i>
          <span class="find-footer-item__text">学习</span>
        </div>
        <div class="find-footer-item" style="width: 32%;">
          <i class="el-icon-user find-footer-item__icon"></i>
          <span class="find-footer-item__text">我的</span>
        </div>
      </div>
    </div>
    <el-button type="primary" class="saveBtn" @click="addAssembly">保存</el-button>
  </div>
</template>
<script>
  import vuedraggable from 'vuedraggable'
  import ImageAd from './find2/imageAd'
  import BannerAd from './find2/bannerAd'
  import Course from './find2/courseList'
  import Class from './find2/classList'
  import navTab from './find2/navtab'
  import tabMenu from './find2/tabMenu'

  import { batchSave, del, list } from '@/api/system/mobile_assembly'
  import { getTenantId } from '@/utils/auth'

  export default {
    components: {
      vuedraggable,
      ImageAd,
      BannerAd,
      Course,
      Class,
      navTab,
      tabMenu
    },
    data() {
      return {
        leftIndex: 0,
        list: []
      }
    },
    created() {
      this.getListData()
    },
    methods: {
      left_click(index) {
        console.log(index)
        var that = this
        that.leftIndex = index
        for (let i = 0; i < that.list.length; i++) {
          that.list[i].showRight = false
          this.$set(that.list, i, that.list[i])
        }
        // this.$set(that.list,that.list)
        that.list[that.leftIndex].showRight = true
        console.log(that.list)
      },
      getListData() {
        list(getTenantId(), 'f').then(response => {
          console.log(response.data.items)
          this.list = response.data.items
          if (this.list.length > 0) {
            this.list.map(item => {
              if (item.type === 'coupon') item.couponInfo = []
              if (item.type === 'assemble') item.assembleInfo = []
              if (item.type === 'bargain') item.bargainInfo = []
              if (item.type === 'seckill') item.seckillInfo = []
            })
          } else {
            var that = this
            that.list.push({
              cardRight: 1,
              type: 'image_ad',
              modelType: 'f',
              showRight: true,
              tenantId: getTenantId(),
              images: [
                {
                  url: require('../../../assets/editapp/banner.png')
                }
              ]
            })
            that.list.push({
              cardRight: 2,
              type: 'course',
              modelType: 'f',
              showRight: true,
              courseType: '',
              recentDay: '',
              limit: '3',
              title: '热门排行',
              tenantId: getTenantId(),
              courseList: [
                {
                  url: require('../../../assets/editapp/img_012.png'),
                  title: '儿童视宝护眼台灯VL234升级版最新款',
                  hour: '20课时',
                  hot: '2999',
                  sale: '20'
                },
                {
                  url: require('../../../assets/editapp/banner3.png'),
                  title: '儿童视宝护眼台灯VL234升级版最新款',
                  hour: '20课时',
                  hot: '2999',
                  sale: '20'
                },
                {
                  url: require('../../../assets/editapp/banner4.png'),
                  title: '儿童视宝护眼台灯VL234升级版最新款',
                  hour: '20课时',
                  hot: '87299',
                  sale: '20'
                }
              ]
            })

            that.list.push({
              cardRight: 3,
              type: 'class',
              modelType: 'f',
              showRight: true,
              courseType: 'all',
              recentDay: '',
              limit: 2,
              title: '推荐课程',
              // courseTab: [],
              tenantId: getTenantId(),
              images: [
                {
                  url: require('../../../assets/editapp/banner5.png'),
                  linkRadio: 'instationLink',
                  link: '',
                  customLink: '',
                  selfAdaption: 'yes'
                }
              ],
              courseList: [
              ]
            })

            that.list.push({
              cardRight: 4,
              type: 'banner_ad',
              modelType: 'f',
              showRight: true,
              courseType: '',
              recentDay: '',
              limit: '3',
              title: '本周精选',
              tenantId: getTenantId(),
              courseList: [
                {
                  url: require('../../../assets/editapp/img_jingxuanke2x.png'),
                  title: '儿童视宝护眼台灯VL234升级版最新款',
                  hour: '20课时',
                  hot: '2999',
                  content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
                }
              ]
            })

            that.list.push({
              cardRight: 5,
              type: 'navTab',
              modelType: 'f',
              showRight: true,
              tenantId: getTenantId(),
              tabList: [
                {
                  url: require('../../../assets/editapp/icon_qiandaozhongxin2x.png'),
                  link: '',
                  title: '低价秒杀'
                },
                {
                  url: require('../../../assets/editapp/icon_mianfeihaoke2x.png'),
                  link: '',
                  title: '免费好课'
                },
                {
                  url: require('../../../assets/editapp/icon_meirihongbao2x.png'),
                  link: '',
                  title: '每日红包'
                },
                {
                  url: require('../../../assets/editapp/icon_qiandaozhongxin2x.png'),
                  link: '',
                  title: '签到中心'
                }
              ]
            })
            this.traverseList()
          }
        })
      },
      traverseList() {
        var that = this
        this.leftIndex = that.list.length - 1
        for (let i = 0; i < that.list.length; i++) {
          that.list[i].showRight = false
          this.$set(that.list, i, that.list[i])
        }
        that.list[that.leftIndex].showRight = true
      },
      addImageAd() {
        var that = this
        that.list.push({
          cardRight: 1,
          type: 'image_ad',
          modelType: 'f',
          showRight: true,
          tenantId: getTenantId(),
          images: [
            {
              url: require('../../../assets/editapp/banner.png')
            }
          ]
        })
        this.traverseList()
      },
      addBannerAd() {
        var that = this
        that.list.push({
          cardRight: 2,
          type: 'banner_ad',
          modelType: 'f',
          showRight: true,
          courseType: '',
          recentDay: '',
          limit: '3',
          title: '本周精选',
          tenantId: getTenantId(),
          courseList: [
            {
              url: require('../../../assets/editapp/img_jingxuanke2x.png'),
              title: '儿童视宝护眼台灯VL234升级版最新款',
              hour: '20课时',
              hot: '2999',
              content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
            }
          ]
        })
        this.traverseList()
      },
      addCourse() {
        var that = this
        that.list.push({
          cardRight: 3,
          type: 'course',
          modelType: 'f',
          showRight: true,
          courseType: '',
          recentDay: '',
          limit: '3',
          title: '热门排行',
          tenantId: getTenantId(),
          courseList: [
            {
              url: require('../../../assets/editapp/img_012.png'),
              title: '儿童视宝护眼台灯VL234升级版最新款',
              hour: '20课时',
              hot: '2999',
              sale: '20'
            },
            {
              url: require('../../../assets/editapp/banner3.png'),
              title: '儿童视宝护眼台灯VL234升级版最新款',
              hour: '20课时',
              hot: '2999',
              sale: '20'
            },
            {
              url: require('../../../assets/editapp/banner4.png'),
              title: '儿童视宝护眼台灯VL234升级版最新款',
              hour: '20课时',
              hot: '87299',
              sale: '20'
            }
          ]
        })
        this.traverseList()
      },
      addClass() {
        var that = this
        that.list.push({
          cardRight: 4,
          type: 'class',
          modelType: 'f',
          showRight: true,
          courseType: 'all',
          recentDay: '',
          limit: 2,
          title: '推荐课程',
          // courseTab: [],
          tenantId: getTenantId(),
          images: [
            {
              url: require('../../../assets/editapp/banner5.png'),
              linkRadio: 'instationLink',
              link: '',
              customLink: '',
              selfAdaption: 'yes'
            }
          ],
          courseList: [
            {
              url: require('../../../assets/editapp/img_03.png'),
              title: '西瓜创客6节编程课+3节家长智慧课堂',
              study: '已更新32期',
              hot: '1.2',
              money: '￥399'
            },
            {
              url: require('../../../assets/editapp/img_03.png'),
              title: '西瓜创客6节编程课+3节家长智慧课堂',
              study: '已更新32期',
              hot: '1.2',
              money: '￥399'
            },
            {
              url: require('../../../assets/editapp/img_03.png'),
              title: '西瓜创客6节编程课+3节家长智慧课堂',
              study: '已更新32期',
              hot: '1.2',
              money: '￥399'
            }
          ]
        })
        this.traverseList()
      },

      addMembers() {
        var that = this
        that.list.push({
          cardRight: 5,
          type: 'navTab',
          modelType: 'f',
          showRight: true,
          tenantId: getTenantId(),
          tabList: [
            {
              url: require('../../../assets/editapp/icon_qiandaozhongxin2x.png'),
              link: '',
              title: '低价秒杀'
            },
            {
              url: require('../../../assets/editapp/icon_mianfeihaoke2x.png'),
              link: '',
              title: '免费好课'
            },
            {
              url: require('../../../assets/editapp/icon_meirihongbao2x.png'),
              link: '',
              title: '每日红包'
            },
            {
              url: require('../../../assets/editapp/icon_qiandaozhongxin2x.png'),
              link: '',
              title: '签到中心'
            }
          ]
        })
        this.traverseList()
      },
      addTabmenu() {
        this.list.push({
          cardRight: 6,
          type: 'tabMenu',
          modelType: 'f',
          showRight: true,
          tenantId: getTenantId(),
          tabList: ['语文', '数学']
        })
        this.traverseList()
      },

      // 删除列表
      close(id) {
        console.log(id)
        if (id) {
          del(id).then(() => {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.list.splice(this.leftIndex, 1)
          })
        } else {
          this.list.splice(this.leftIndex, 1)
        }
      },
      addAssembly() {
        batchSave(this.list).then(() => {
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 2000
          })
          this.getListData()
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .emaBox {
    .setting-page {
      position: relative;
      margin: 0 20px 20px;
      padding-bottom: 310px;
      width: 375px;
      min-height: 667px;
      box-sizing: border-box;
      border: 1px solid #e1e1e1;

      .find-head-img {
        width: 373px;
        vertical-align: top;
      }

      .find-navbar {
        position: relative;
        background-color: #212121;
        text-align: center;
        line-height: 56px;
        color: #fff;
        width: 374px;
        font-size: 18px;
        margin-left: -1px;
        margin-right: -1px;
      }

      .multi-find-section {
        background: #fff;
        padding: 0;

        .section-title {
          margin-left: 0;
          padding: 0 15px;
          background: #f5f5f5;
          line-height: 38px;
        }

        .section-button-group {
          padding: 7.5px 0 7.5px 15px;

          button {
            margin: 6px 2px;
          }
        }
      }

      .find-section {
        position: absolute;
        bottom: 50px;
        box-sizing: border-box;
        width: 373px;
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
        font-size: 14px;
      }

      // 底部样式
      .find-footer {
        position: absolute;
        bottom: 0;
        height: 50px;
        width: 100%;
        background-color: #fff;
        border-top: 1px solid #e1e1e1;

        .find-footer-item {
          display: inline-block;
          height: 100%;
          box-sizing: border-box;
          padding: 5px 0;
          font-size: 12px;
          color: #929292;
          text-align: center;

          .find-footer-item__icon {
            font-size: 26px;
          }

          .find-footer-item__text {
            display: block;
            text-align: center;
            line-height: 20px;
          }
        }

        .find-footer-item.active {
          color: #408ffb;
        }
      }
    }

    .contentList {
      border: 1px solid rgba($color: #fff, $alpha: 0);
      box-sizing: border-box;
      position: relative;

      .close {
        z-index: 3;
        position: absolute;
        top: -10px;
        right: -10px;
        width: 20px;

        img {
          width: 100%;
        }
      }
    }

    .contentList:hover {
      border: 1px solid #408ffb;
    }

    .border {
      border: 1px dotted #408ffb;
    }

    .saveBtn {
      margin-bottom: 310px;
      margin-left: 40px;
    }
  }
</style>
